<template>
  <div>
    <div class="list-btn">
      名称:<Input v-model.trim="params.name" placeholder="请输入名称" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div>
    <!-- <div class="list-btn">
      编码:<Input v-model.trim="params.key" placeholder="请输入编码" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div> -->
    <div class="list-btn">
      状态:
      <Select clearable style="width:200px" v-model="params.status" placeholder="全部">
        <Option value=" ">全部</Option>
        <Option :value="0">禁用</Option>
        <Option :value="1">启用</Option>
      </Select>
    </div>
    <div class="list-btn">
      <Button type="primary" @click="getList(url,'refresh')">搜索</Button>
    </div>
    <div class="list-btn">
      <Button
        type="primary"
        @click="resetValidate('formRole');
        showModal = true;
        type = '新增'
        ">
       新增字典
      </Button>
    </div>
    <page-list :listTitle="listTitle" :list="list" :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :total="total" @changePageNum="params.pageCurrent = $event; getList(url)" @changePageSize="params.pageLimit = $event; getList(url)"></page-button>
    <!--新增字典-->
    <Modal
      v-model="showModal"
      :title='`${type}字典`'
      width="520"
      :closable="true"
      :style="{textAlign:'left'}">
      <Form ref="formRole" :rules="ruleValidate" :model="formRole" :label-width="80">
        <FormItem label="名称" prop="name" >
          <Input v-model="formRole.name" placeholder="请输入"  style="width:200px"></Input>
        </FormItem>
        <FormItem label="分组编码" prop="groupCode" >
          <Input v-model="formRole.groupCode"  placeholder="请输入" style="width:200px"></Input>
        </FormItem>
         <FormItem label="分组名称" prop="groupName" >
          <Input v-model="formRole.groupName"  placeholder="请输入" style="width:200px"></Input>
        </FormItem>
         <FormItem label="编码" prop="key" >
          <Input v-model="formRole.key"  placeholder="请输入" style="width:200px"></Input>
        </FormItem>
         <FormItem label="字典值" prop="value" >
          <Input v-model="formRole.value"  placeholder="请输入" style="width:200px"></Input>
        </FormItem>
         <FormItem label="状态" prop="status" >
          <Select clearable v-model="formRole.status" placeholder="请选择" style="width:200px">
            <Option value="0">禁用</Option>
            <Option value="1">启用</Option>
          </Select>
        </FormItem>
         <FormItem label="说明" prop="description" >
         <Input v-model="formRole.description" type="textarea"  placeholder="请输入" style="width:260px"></Input>
        </FormItem>
       <div style='margin-left:350px'>
          <Button @click="cancel" style="margin-right:3px">取消</Button>
          <Button type="primary" @click="ok">确定</Button>
        </div>
      </Form>
    </Modal>
  </div>
</template>

<script>
  import listMixin from '../../mixin/list'
  import pageList from '../../template/listTemplate'
  import pageButton from '../../template/pageBtnTemplate'

  export default {
    mixins:[listMixin],
    components: {
      pageList,
      pageButton,
    },
    data () {
      return {
        tag: {
          'title': '字典列表',
          'path': '/work/dictionary/list'
        },
        showModal:false,
        type:'',
        formRole: {},
        ruleValidate: {
          name: [
            { required: true, message: '请填写字典名称', trigger: 'blur' }

          ],
          groupCode: [
            { required: true, message: '请填写分组编码', trigger: 'blur' }
          ],
          groupName: [
            { required: true, message: '请填写分组名称', trigger: 'blur' }
          ],
          key: [
            { required: true, message: '请填写编码', trigger: 'blur' }
          ],
          value: [
            { required: true, message: '请填写字典值', trigger: 'blur' }
          ],
          description: [
            { required: true, message: '请填写说明', trigger: 'blur' }
          ],
          status: [
            { required: true, message: '请填写状态', trigger: 'blur' }
          ],
        },
       listTitle: [
        {
          title: "名称",
          key: "name",
          align: "center",
          minWidth:160,
        },
        // {
        //   title: "分组编码",
        //   key: "groupCode",
        //   align: "center",
        //   minWidth:120,
        //   render:(h,params) => {
        //     return h('div', params.row.groupName ? params.row.groupName : "—")
        //   }
        // },
        // {
        //   title: "分组名称",
        //   key: "groupName",
        //   minWidth:120,
        //   align: "center",
        //   render:(h,params) => {
        //     return h('div', params.row.groupName ? params.row.groupName : "—")
        //   }
        // },
        // {
        //   title: "编码",
        //   key: "key",
        //   align: "center",
        //   minWidth:180,
        //    render:(h,params) => {
        //     return h('div', params.row.key ? params.row.key : "—")
        //   }
        // },
        // {
        //   title: "字典值",
        //   key: "value",
        //   align: "center",
        //   minWidth:120,
        //   // render:(h,params) => {
        //   //   return h('div', params.row.bankNum ? params.row.bankNum : "—")
        //   // }
        // },
        {
          title: "说明",
          key: "description",
          align: "center",
          minWidth:160,
          render:(h,params) => {
            return h('div', params.row.description == '当前版本' ? params.row.description+"（"+params.row.value+"）" : "—")
          }
        },
        {
          title: "状态",
          key: "status",
          align: "center",
          minWidth:80,
          render:(h,params) => {
            let text ='';
            switch(params.row.status){
              case "0":
                text = '禁用';
                break;
              case "1":
                text = '启用';
                break;
            }
            return h('div', text)
          }
        },
        {
          title: "创建时间",
          key: "createTime",
          align: "center",
          minWidth:210,
          render:(h,params) => {
            return h('div',params.row.createTime ? this.getLocalTime(params.row.createTime) : '—')
          }
        },
        // {
        //   title: "修改时间",
        //   key: "updateTime",
        //   align: "center",
        //   minWidth:210,
        //   render:(h,params) => {
        //     return h('div',params.row.updateTime ? this.getLocalTime(params.row.updateTime) : '—')
        //   }
        // },
        {
          title: "操作",
          key: "action",
          minWidth: 200,
          align: "center",
          render: (h, params) => {
            let btnType = "";
            let display =''
            if(params.row.status == 0){//禁用
              btnType = '启用';
              display = 'inline-block'
            }else if(params.row.status == 1){//启用
              btnType ='禁用';
              display = 'none'
            }
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                        this.$Modal.confirm({
                        title: '提示',
                        content: `<p>确定要${btnType}吗?</p>`,
                        onOk: () => {
                          let status = 0;
                          if(params.row.status == 0){
                            status = 1
                          }else {
                            status = 0
                          }
                           let data = {
                            name: params.row.name,
                            groupCode: params.row.groupCode,
                            groupName:params.row.groupName,
                            key:params.row.key,
                            value:params.row.value,
                            description:params.row.description,
                            id: params.row.id,
                            status:status
                         };
                           this.$post('/sysDict/modify', data)
                            .then((res) => {
                              if(res.code === 0){
                                console.log(res,'edit')
                                this.$Message.success(`${btnType}成功！`);
                                this.getList(this.url);
                              }
                            }, (err) => {
                              console.log(err);
                            })
                        },
                        onCancel: () => {
                        }
                      });

                    }
                  }
                },
                btnType
              ),
              h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px",
                    display:display
                  },
                  on: {
                    click: () => {
                      this.type = '编辑';
                      this.resetValidate('formRole');
                      this.showModal = true;
                      this.formRole = JSON.parse(JSON.stringify(params.row));
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small",

                  },
                  style: {
                    display:display
                  },
                  on: {
                    click: () => {
                        this.$Modal.confirm({
                        title: '提示',
                        content: `<p>是否删除该字典?</p>`,
                        onOk: () => {
                          this.delItem('/sysDict/discard',{id:params.row.id})
                        },
                        onCancel: () => {
                        }
                      });

                    }
                  }
                },
                "删除"
              ),

            ]);
          }
        }
      ],
        url:'/sysDict/list',
        params: {
          pageCurrent: 1,
          pageLimit: 10
        },
      }
    },

    methods: {
      ok() { //确定
        let url = '';
        this.$refs['formRole'].validate((valid) => {
          if (valid) {
            let data = {
              name: this.formRole.name,
              groupCode: this.formRole.groupCode,
              groupName:this.formRole.groupName,
              key:this.formRole.key,
              value:this.formRole.value,
              description:this.formRole.description,
              status:this.formRole.status,
              id:this.formRole.id,
            };
            if(this.type == '新增'){
              url = '/sysDict/append';
            }else if(this.type == '编辑'){
              url = '/sysDict/modify';
            }
            this.$post(url, data)
              .then((res) => {
                if(res.code === 0){
                  console.log(res,'edit')
                  this.showModal = false;
                  this.$Message.success(`${this.type}成功！`);
                  this.getList(this.url);
                }
              }, (err) => {
                console.log(err);
              })
          }
        })
      },
      cancel() { //取消
        this.showModal = false;
      },

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .list-btn{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }
  /deep/ .ivu-modal-footer{
  display: none;
}
/deep/ textarea.ivu-input{
  height:80px;
}
</style>
